<template>
	<div class="product-card" :style="{ width: props.width }">
		<div class="container" @click="onclick">
			<div class="image-box">
				<van-image :src="src" fit="cover" width="100%" :height="props.imgHeight" class="img" />
			</div>
			<div class="info">
				<p v-if="props.name" class="name">{{ props.name }}</p>
				<p v-if="props.price" class="price"><span class="unit">￥</span>{{ props.price }}</p>
			</div>
		</div>
	</div>
</template>

<script setup>
const { proxy } = getCurrentInstance();

const props = defineProps({
	width: {
		type: String,
		default: '50%',
	},
	imgHeight: {
		type: String,
		default: '200px',
	},
	src: String,
	name: String,
	price: [Number, String],
	to: [Object, String],
});

const onclick = () => {
	// 跳转
	if (props.to) proxy.$router.push(props.to);
};
</script>

<style scoped lang="scss">
.product-card {
	display: inline-block;
	margin: 5px 0;
	.container {
		padding: 0 5px;
		.image-box {
			background-color: #fff;
			padding-top: 10px;
			.img {
				display: block;
			}
		}

		.info {
			background-color: #fff;
			padding: 5px;
			.name {
				line-height: 22px;
				font-size: 13px;
				color: #333;
				padding: 5px 10px;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				height: 3em;
			}
			.price {
				font-size: 16px;
				color: #fe7923;
				height: 20px;
				padding: 5px 10px 10px;
				.unit {
					font-size: 12px;
				}
			}
		}
	}
}
</style>
